<template>
    <template v-if="user">
        <!--        <van-cell title="头像" to="/user/edit" is-link @click="toEdit('avatar','头像',user.avatarUrl)">-->
        <!--            <img style="height: 48px" :src="user.avatarUrl">-->
        <!--        </van-cell>-->

        <div style="align-content: center; margin-left: 100px; margin-top: 20px">
            <van-image
                    round
                    @click="toEdit('avatar','头像',user.avatarUrl)"
                    width="10rem"
                    fit="cover"
                    height="10rem"
                    position="right"
                    :src="user.avatarUrl"
            />
            <p style="margin-left: 60px; font-weight: bold">{{user?.username}}</p>
        </div>

        <van-cell title="个人详情" is-link to="/user/update"/>
        <van-cell title="我创建的队伍" is-link to="/user/team/create"/>
        <van-cell title="我加入的队伍" is-link to="/user/team/join"/>
<!--        <van-cell title="退出登录" is-link @click="logout"/>-->
        <br/>
        <van-button type="danger" round  @click="logout"  size="large">退出登录</van-button>
    </template>
</template>

<script setup lang="ts">

import {useRouter} from "vue-router";
import {getCurrentUser} from "../services/user.ts";
import {onMounted, ref} from "vue";
import {showConfirmDialog, showFailToast, showSuccessToast} from "vant";
import myAxios from "../plugins/myAxios";

const logout = async () => {
    showConfirmDialog({
        title: '退出登录',
    }).then(async () => {
        // on confirm
        const res = await myAxios.post('/user/logout')

        if (res?.code === 0) {
            showSuccessToast('退出成功！');
            router.push({
                path: '/user/login',
                replace: true,
            });
        } else {
            showFailToast('您的操作有误');
        }
    })
        .catch(() => {
            // on cancel
        });
}


const user = ref();

const router = useRouter();

onMounted(async () => {
    user.value = await getCurrentUser();
    if (user?.value.code === 40100) {
        showFailToast('请登录后重试！');
    }
})


const toEdit = (editKey: string, editName: string, currentValue: string) => {
    router.push({
        path: '/user/edit',
        query: {
            editKey,
            editName,
            currentValue,
        }
    })
}


</script>

<style scoped>

</style>